<template>
    <div>
        <el-dialog title="添加菜单" :visible.sync="isshow" center :before-close="esc">
            <el-form :model="form" :rules="rules" ref="formName">

                <el-form-item label="所属角色" :label-width="formLabelWidth" prop="roleid">
                    <el-select v-model="form.roleid" placeholder="请选择">

                        <el-option v-for="item in peogetlist" :key="item.id" :label="item.rolename" :value="item.id">
                        </el-option>

                        <!-- <el-option label="菜单1" :value="1"></el-option>
                        <el-option label="菜单二" :value="2"></el-option> -->
                    </el-select>
                </el-form-item>

                <el-form-item label="用户名称" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="esc">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { useradd, useredit, userinfo } from '../../request/app'
export default {
    props: ['isshow', 'isedit'],
    data() {
        return {
            // isshow:true,
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                username: '',
                roleid: '',
                password: '',
                status: ''
            },
            rules: {
                roleid: [
                    { required: true, message: '请选择所属角色', trigger: 'change' },
                ],
                username: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                ],
            },
            formLabelWidth: '120px',

        };
    },
    computed: {
        ...mapGetters({
            // magetlist: 'setmange/getlist',
            peogetlist: 'setpeople/getlist'
        })
    },
    mounted() {
        this.ACgetlistpeo()
        // this.ACsetlist(this.sizepage)
        // console.log(this.magetlist);
        // console.log(this.peogetlist);
    },
    methods: {
        ...mapActions({
            ACsetlist: 'setmange/ACsetlist',
            ACgetlistpeo: 'setpeople/ACgetlistpeo',
            ACgetpage: 'setmange/ACgetpage'
        }),
        esc() {
            // console.log(e);
            this.$emit('isshow', false)
            this.resize()
        },
        sure(e) {
            // console.log(e);
            // console.log(this.form);


            this.$refs.formName.validate((e) => {

                if (e) {
                    if (this.isedit) {
                        console.log(1111111111, 'edit');
                        useredit(this.form)
                            .then(res => {
                                console.log(res);
                            })
                        this.ACsetlist()
                        this.esc()

                    } else {
                        useradd(this.form)
                            .then(res => {
                                // console.log(res);
                                this.ACsetlist()
                                this.ACgetpage()
                                this.esc()
                            })
                    }
                }
            })

        },
        resize() {
            this.form = {
                username: '',
                roleid: '',
                password: '',
                status: ''
            }
            this.$refs.formName.resetFields();
        },
        lookup(uid) {
            userinfo({
                uid
            })
                .then(res => {
                    console.log(res);
                    this.form = res.list
                    this.form.password = ''
                    console.log(this.form);
                })
        }
    },
    components: {
    },
}
</script>

<style scoped>
</style>
